<template>
    <div id="pie1">
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: "echarts",
    data: function () {
        return {

        }
    },
    mounted: function () {
        this.echartsInit();
    },
    methods: {
        async echartsInit() {
            await this.$axios({
                url: 'count/device',
                method: 'get'
            }).then(({ data }) => {
                if (data.code == 200) {
                    echarts.init(document.getElementById('pie1')).setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: ['30%', '50%'],
                                labelLine: {
                                    length: 10,
                                    show: true,
                                    showAbove: true,
                                    smooth: true
                                },
                                labelLayout: {
                                    draggable: true,
                                },
                                label: {
                                    formatter: '{b|{b}:} {c|{c}}{per| \({d}%\)}',
                                    border: 0,
                                    padding: [0, 0],
                                    rich: {
                                        b: {
                                            color: '#fff',
                                            fontSize: 12,
                                            lineHeight: 33
                                        },
                                        c: {
                                            color: '#fff',
                                            fontSize: 12,
                                            lineHeight: 33
                                        },
                                        per: {
                                            color: '#fff',
                                        }
                                    }
                                },
                                data: [
                                    { value: data.data.正常数, name: '正常' },
                                    { value: data.data.离线数, name: '离线' },
                                    { value: data.data.报警数, name: '报警' }
                                ]
                            }
                        ]
                    })
                } else {
                    echarts.init(document.getElementById('pie1')).showLoading();
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
#pie1 {
    width: 100%;
    height: 100%;
    margin-top: -20px;

    display: flex;
    justify-content: center;
    align-items: center;
}
</style>